<template>
  <div class="app-container">
    <!-- 搜索区域 - 优化布局和样式 -->
    <div class="search-card" style="margin-bottom: 5px;">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <div class="search-row">
          <!-- 产线选择 -->
          <div class="form-group">
            <label class="form-label"> 产线选择</label>
            <el-select v-model="queryParams.line" multiple clearable collapse-tags placeholder="请选择产线"
              popper-class="custom-header" :max-collapse-tags="1" style="width: 280px" @change="updateCheckAllStatus">
              <el-checkbox style="margin-left: 10px;margin-bottom: 5px;" v-model="checkAll"
                :indeterminate="indeterminate" @change="handleCheckAll">
                全选
              </el-checkbox>
              <el-option v-for="item in lineList" :key="item.line_id" :label="item.line_name" :value="item.line_id" />
            </el-select>
          </div>

          <!-- MPN输入 -->
          <div class="form-group">
            <label class="form-label"> MPN名称</label>
            <el-input v-model="queryParams.MPN_name" placeholder="请输入品目名称" clearable style="width: 220px" />
          </div>
        </div>

        <div class="search-row">
          <!-- 测定日期 -->
          <div class="form-group">
            <label class="form-label"> 测定日期</label>
            <el-date-picker v-model="queryParams.query_time" type="daterange" range-separator="至"
              start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd" style="width: 320px" />
          </div>

          <!-- 状态选择 -->
          <div class="form-group">
            <label class="form-label"> 状态</label>
            <el-select v-model="queryParams.state" placeholder="请选择状态" style="width: 120px;">
              <el-option v-for="item in stateList" :key="item.state_id" :label="item.state_name"
                :value="item.state_id" />
            </el-select>
          </div>
        </div>

        <div class="search-row">
          <!-- 查询方式 -->
          <div class="form-group">
            <label class="form-label"> 查询方式</label>
            <el-select v-model="dataStyle" style="width: 100px;" @change="getCTList">
              <el-option value="0" label="月份"></el-option>
              <el-option value="1" label="日期"></el-option>
              <el-option value="2" label="周"></el-option>
            </el-select>
          </div>

          <!-- 筛选选项 -->
          <div class="form-group filter-options">
            <el-checkbox v-model="showOnlyOverBenchmark" @change="getCTList">
              <span class="filter-label"> 历史未达标</span>
            </el-checkbox>
            <el-checkbox v-model="showOnlyLastOverBenchmark" @change="getCTList">
              <span class="filter-label"> 当前未达标</span>
            </el-checkbox>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
          <el-button type="primary" icon="el-icon-search" @click="getCTList">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetButton">重置</el-button>
          <el-button type="warning" icon="el-icon-download" @click="exportToExcel">导出Excel</el-button>
        </div>
      </el-form>
    </div>

    <!-- 数据表格 - 使用 filteredTableData -->
    <el-table :data="filteredTableData" border style="width: 100%" height="600px" v-loading="loading"
      v-if="filteredTableData.length > 0">
      <el-table-column label="序号" type="index" align="center" width="60" fixed />
      <el-table-column label="品目名称" prop="mpn_name" align="center" width="100" fixed />
      <el-table-column label="内部名称" prop="internal_name" align="center" width="100" fixed />
      <el-table-column label="工艺名称" prop="process_name" align="center" width="100" fixed />
      <el-table-column label="Line NO" prop="line_name" align="center" width="80" fixed />
      <el-table-column label="基准CT" prop="benchmark_value" align="center" width="80" fixed />



      <!-- 动态生成时间段列 -->
      <el-table-column v-for="period in periodColumns" :key="period.key" :label="period.label" align="center"
        :resizable="true" width="150">
        <template slot-scope="scope">
          <div v-if="scope.row.periodData[period.key] && scope.row.periodData[period.key].hasData"
            @dblclick="handleDbClick(period.key, scope.row)">
            <el-tooltip :content="`
    日期: ${scope.row.periodData[period.key].lastDate}\n
    基准CT:${scope.row.periodData[period.key].benchmark}\n
    异常原因: ${scope.row.periodData[period.key].exception_cause}\n
    对策措施: ${scope.row.periodData[period.key].countermeasure}\n
    纳期: ${scope.row.periodData[period.key].acceptance}\n
    负责人: ${scope.row.periodData[period.key].npi}
  `" placement="top" popper-class="tooltip-multiline">
              <div>
                <!-- 使用时间段特定的基准值进行颜色标记 -->
                <span style="font-weight: bold;"
                  :class="getColorClass(scope.row.periodData[period.key].benchmark, scope.row.periodData[period.key].avg)">
                   {{ scope.row.periodData[period.key].avg }}
                </span>
              </div>
            </el-tooltip>
          </div>
          <div v-else>
            <span>-- 无数据 --</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="历史最大值" align="center" width="80">
        <template slot-scope="scope">
          <span style="font-weight: bold;" :class="getColorClass(scope.row.benchmark_value, scope.row.max_avg)">
            {{ scope.row.max_avg }}
          </span>
        </template>
      </el-table-column>

      <el-table-column label="当前未达标" align="center" width="100">
        <template slot-scope="scope">
          <span style="font-weight: bold;" :class="getColorClass(scope.row.benchmark_value, scope.row.last_avg)">
            {{ scope.row.last_avg }}
          </span>
        </template>
      </el-table-column>


      <el-table-column label="异常原因" align="center" width="100">
        <template slot-scope="scope">
          <span style="font-weight: bold;">
            {{ scope.row.exception_cause }}
          </span>
        </template>
      </el-table-column>


      <el-table-column label="对策措施" align="center" width="100">
        <template slot-scope="scope">
          <span style="font-weight: bold;">
            {{ scope.row.countermeasure }}
          </span>
        </template>
      </el-table-column>

      <el-table-column label="纳期" align="center" width="100">
        <template slot-scope="scope">
          <span style="font-weight: bold;">
            {{ scope.row.acceptance }}
          </span>
        </template>
      </el-table-column>

      <el-table-column label="负责人" align="center" width="100">
        <template slot-scope="scope">
          <span style="font-weight: bold;">
            {{ scope.row.npi }}
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

// 导入xlsx库
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';

import { getUserLinkLineByLogin, getCTTableDBByLineIdEnterDateMPNName } from "@/api/ctManage/MPNManage"
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Treeselect from "@riophae/vue-treeselect";
import "splitpanes/dist/splitpanes.css";
import { h } from 'vue';
export default {
  name: "sampleDel",
  components: { Treeselect },
  data() {
    return {
      loading: false,
      dataStyle: "2",
      dialogVisibleCTform: false,
      // 新增全选状态变量
      checkAll: false,         // 全选状态
      indeterminate: false,    // 半选状态
      // 新增只显示未达标选项
      showOnlyOverBenchmark: false,
      // 新增只显示最后未达标选项
      showOnlyLastOverBenchmark: false,
      //产线参数
      lineList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        MPN_name: '',
        state: 2,
        query_time: [],
        line: []   // 确保初始化为数组
      },
      // 表格数据
      tableData: [],
      //状态列表
      stateList: [
        { state_id: 1, state_name: '启用' },
        { state_id: 0, state_name: '禁用' },
        { state_id: 2, state_name: '全部' }
      ],
      // 新增数据分组相关变量
      groupedTableData: [], // 原始分组数据
      displayedTableData: [], // 最终显示的数据
      periodColumns: [], // 存储时间段列信息
      overBenchmarkData: [] // 专门存储未达标数据
    };
  },
  computed: {
    // 计算过滤后的表格数据
    filteredTableData() {
      if (!this.showOnlyOverBenchmark && !this.showOnlyLastOverBenchmark) {
        return this.displayedTableData;
      }

      if (this.showOnlyLastOverBenchmark) {
        return this.displayedTableData.filter(row => {
          // 使用最后有效日期的基准值进行比较
          const benchmark = row.current_benchmark_value !== undefined
            ? row.current_benchmark_value
            : row.benchmark_value;

          return row.last_avg !== '--' &&
            benchmark !== null &&
            benchmark !== undefined &&
            parseFloat(row.last_avg) > parseFloat(benchmark);
        });
      }

      return this.overBenchmarkData;
    }
  },
  created() {
    this.getUserLine()
  },
  methods: {
    handleDbClick(data, row) {
      const routePath = '/ctManage/ctManageSel';
      if (routePath) {
        // 使用若依框架的标签页导航方法
        this.$tab.openPage('CT管理表', routePath, row.periodData[data]);
      } else {
        console.warn(`未找到 ${chartKey} 对应的路由`);
        this.$modal.msgWarning(`未配置 ${chartKey} 的跳转路由`);
      }
    },
    // 过滤未达标数据
    filterOverBenchmarkData() {

      this.overBenchmarkData = [];

      // 遍历所有数据行
      this.displayedTableData.forEach(row => {
        let hasOverBenchmark = false;

        // 1. 检查历史最大值是否超过基准
        if (this.isOverBenchmark(row.benchmark_value, row.max_avg)) {
          hasOverBenchmark = true;
        }

        // 2. 检查时间段数据是否超过基准 - 使用时间段特定的基准值
        if (!hasOverBenchmark) {
          for (const periodKey in row.periodData) {
            const period = row.periodData[periodKey];
            if (period.hasData && this.isOverBenchmark(period.benchmark, period.avg)) {
              hasOverBenchmark = true;
              break;
            }
          }
        }

        // 如果存在未达标数据，添加到专用数组
        if (hasOverBenchmark) {
          this.overBenchmarkData.push(row);
        }
      });
    },

    // 添加导出Excel方法
    exportToExcel() {
      if (this.filteredTableData.length === 0) {
        this.$modal.msgWarning("没有数据可导出");
        return;
      }

      // 创建工作簿
      const wb = XLSX.utils.book_new();

      // 准备表头
      const headers = [
        '序号', '品目名称', '内部名称', '工艺名称', 'Line NO','基准CT',
      ];

      // 添加时间段列的表头
      this.periodColumns.forEach(col => {
        headers.push(col.label);
      });
      headers.push('历史未达标', '当前未达标','异常原因','对策措施','纳期','负责人');
      // 准备数据
      const data = [headers];

      // 填充数据行
      this.filteredTableData.forEach((row, index) => {
        const rowData = [
          index + 1,
          row.mpn_name,
          row.internal_name,
          row.process_name,
          row.line_name,
          row.benchmark_value,
        ];

        // 添加时间段数据
        this.periodColumns.forEach(col => {
          const period = row.periodData[col.key];
          if (period && period.hasData) {
            rowData.push(`${period.avg}`);
          } else {
            rowData.push('-- 无数据 --');
          }
        });
        rowData.push(row.max_avg,);
        rowData.push(row.last_avg,);
        rowData.push(row.exception_cause,);
        rowData.push(row.countermeasure,);
        rowData.push(row.acceptance);
        rowData.push(row.npi);

        data.push(rowData);
      });

      // 创建工作表
      const ws = XLSX.utils.aoa_to_sheet(data);

      // 设置列宽（固定列+动态时间段列）
      const colWidths = [
        { wch: 8 },   // 序号
        { wch: 12 },  // 品目名称
        { wch: 12 },  // 内部名称
        { wch: 12 },  // 工程名称
        { wch: 8 },   // Line NO
        { wch: 12 }, // 历史未达标
        { wch: 12 }  // 当前未达标
      ];

      // 时间段列的宽度
      this.periodColumns.forEach(() => {
        colWidths.push({ wch: 18 });
      });

      ws['!cols'] = colWidths;

      // 将工作表添加到工作簿
      XLSX.utils.book_append_sheet(wb, ws, 'CT数据报表');

      // 生成Excel文件并下载
      const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
      const blob = new Blob([wbout], { type: 'application/octet-stream' });
      saveAs(blob, `CT数据报表_${new Date().toISOString().slice(0, 10)}.xlsx`);
    },

    // 判断是否超过基准值
    isOverBenchmark(benchmark, value) {
      if (value === '--' || benchmark === null || benchmark === undefined) {
        return false;
      }

      const numValue = Number(value);
      const numBenchmark = Number(benchmark);

      return !isNaN(numValue) && !isNaN(numBenchmark) && numValue > numBenchmark;
    },

    // 获取ISO周数
    getISOWeek(date) {
      const d = new Date(date);
      d.setHours(0, 0, 0, 0);
      d.setDate(d.getDate() + 4 - (d.getDay() || 7));
      const yearStart = new Date(d.getFullYear(), 0, 1);
      const weekNo = Math.ceil(((d - yearStart) / 86400000 + 1) / 7);
      return weekNo;
    },

    // 格式化时间段标签
    formatPeriodLabel(date, periodType) {
      const dateObj = new Date(date);
      const year = dateObj.getFullYear();

      if (periodType === 'month') {
        const month = dateObj.getMonth() + 1;
        return `${year}年${month}月`;
      } else if (periodType === 'week') {
        const week = this.getISOWeek(dateObj);
        return `${year}年第${week}周`;
      }
      return date;
    },

    // 处理时间段数据
    processPeriodData() {
      // 重置显示数据
      this.displayedTableData = JSON.parse(JSON.stringify(this.groupedTableData));
      this.periodColumns = [];

      // 确定时间段类型
      const periodType = this.dataStyle === '0' ? 'month' : (this.dataStyle === '2' ? 'week' : 'day');

      // 收集所有时间段键
      const allPeriodKeys = new Set();

      // 为每个品目处理时间段数据
      this.displayedTableData.forEach(mpn => {
        mpn.periodData = {};

        // 按日期排序
        const sortedDates = Object.keys(mpn.dateData).sort((a, b) =>
          new Date(a) - new Date(b)
        );

        // 创建按时间段分组的数据容器
        const periodGroups = {};

        // 分组数据到时间段 - 只取最后一个有数据的日期值
        sortedDates.forEach(dateStr => {
          const dateObj = new Date(dateStr);
          let periodKey;
          if (periodType === 'month') {
            periodKey = `${dateObj.getFullYear()}-${dateObj.getMonth()}`;
          } else if (periodType === 'week') {
            const week = this.getISOWeek(dateObj);
            periodKey = `${dateObj.getFullYear()}-${week}`;
          } else {
            periodKey = dateStr;
          }

          // 只有当该日期有测试数据时才更新
          if (mpn.dateData[dateStr].test_valuess && mpn.dateData[dateStr].test_valuess.length > 0) {
            // 存储基准值和时间段数据
            periodGroups[periodKey] = {
              values: mpn.dateData[dateStr].test_valuess,
              lastDate: dateStr,  // 记录最后一个有数据的日期
              benchmark: mpn.dateData[dateStr].benchmark_value,  // 存储该日期的基准值
              exception_cause: mpn.dateData[dateStr].exception_cause, //存储异常原因
              countermeasure: mpn.dateData[dateStr].countermeasure, //存储对策措施
              acceptance: mpn.dateData[dateStr].acceptance, //存储纳期
              npi: mpn.dateData[dateStr].npi, //存储npi
              ct_id: mpn.dateData[dateStr].ct_id, //存储ct_id
            };
          }

          allPeriodKeys.add(periodKey);
        });

        // 计算每个时间段的最后一个有数据的日期的平均值
        Object.keys(periodGroups).forEach(periodKey => {

          const group = periodGroups[periodKey];
          let avg = '--';

          if (group.values && group.values.length > 0) {
            const validValues = group.values.filter(
              v => v !== null && v !== undefined
            );

            if (validValues.length > 0) {
              const sum = validValues.reduce((acc, val) => acc + Number(val), 0);
              avg = (sum / validValues.length).toFixed(2);

              // 存储时间段数据，包括基准值
              mpn.periodData[periodKey] = {
                avg,
                benchmark: group.benchmark,  // 存储时间段特定的基准值
                lastDate: group.lastDate,    // 保存最后一个日期
                hasData: true,
                exception_cause: group.exception_cause, //存储异常原因
                countermeasure: group.countermeasure, //存储对策措施
                acceptance: group.acceptance, //存储纳期
                npi: group.npi, //存储npi
                ct_id: group.ct_id, //存储ct_id
              };
            }
          }
        });
      });

      // 生成时间段列
      this.periodColumns = Array.from(allPeriodKeys).map(key => {
        // 收集该时间段的最晚日期用于排序
        const allDates = this.displayedTableData
          .filter(mpn => mpn.periodData[key] && mpn.periodData[key].hasData)
          .map(mpn => mpn.periodData[key].lastDate);

        // 确定最早日期用于排序
        const minDate = allDates.length > 0
          ? allDates.sort((a, b) => new Date(a) - new Date(b))[0]
          : '';

        return {
          key,
          minDate, // 用于排序
          label: this.formatPeriodLabel(minDate || key, periodType)
        };
      });

      // 按最早日期排序时间段列
      this.periodColumns.sort((a, b) =>
        new Date(a.minDate) - new Date(b.minDate)
      );

      // 初始化未达标数据数组
      this.filterOverBenchmarkData();
    },

    // 全选处理函数
    handleCheckAll(val) {
      if (val) {
        this.queryParams.line = this.lineList.map(item => item.line_id);
      } else {
        this.queryParams.line = [];
      }
      this.indeterminate = false;
    },

    // 全选处理函数
    handleCheckAll(val) {
      if (val) {
        this.queryParams.line = this.lineList.map(item => item.line_id);
      } else {
        this.queryParams.line = [];
      }
      this.indeterminate = false;
    },

    // 更新全选状态
    updateCheckAllStatus() {
      const selectedCount = this.queryParams.line.length;
      const totalCount = this.lineList.length;
      this.checkAll = selectedCount === totalCount && totalCount > 0;
      this.indeterminate = selectedCount > 0 && selectedCount < totalCount;
    },

    // 获取颜色类名
    getColorClass(benchmark, currentValue) {
      if (currentValue === '--' || benchmark === null || benchmark === undefined) {
        return '';
      }

      const numCurrent = Number(currentValue);
      const numBenchmark = Number(benchmark);

      if (isNaN(numCurrent)) return '';
      if (isNaN(numBenchmark)) return '';

      if (numCurrent > numBenchmark) {
        return 'danger-color';
      } else {
        return 'normal-color';
      }
    },

    // 获取平均值
    getAVGValue(values) {
      if (!values || values.length === 0) {
        return '--';
      }

      let cont = 0;
      let sum = 0;
      for (let index = 0; index < values.length; index++) {
        if (values[index] !== null && values[index] !== undefined) {
          cont++;
          sum += Number(values[index]);
        }
      }

      if (cont === 0) return '--';
      return (sum / cont).toFixed(2);
    },

    // 获取当前登录用户链接的全部产线
    getUserLine() {
      getUserLinkLineByLogin().then(response => {
        this.lineList = response;
        this.updateCheckAllStatus();
      })
    },

    // 查询样本
    getCTList() {
      this.loading = true;
      getCTTableDBByLineIdEnterDateMPNName({
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        mpnName: this.queryParams.MPN_name,
        state: this.queryParams.state,
        line: this.queryParams.line,
        timeStar: this.queryParams.query_time?.[0],
        timeEnd: this.queryParams.query_time?.[1]
      }).then(response => {
        // alert(JSON.stringify(response))
        this.loading = false;
        if (response.length === 0) {
          this.$modal.msgError("暂无数据");
          this.groupedTableData = [];
          this.displayedTableData = [];
          this.periodColumns = [];
          this.overBenchmarkData = [];
        } else {
          this.processTableData(response);
          this.processPeriodData();
        }
      }).catch(() => {
        this.loading = false;
      });
    },

    // 数据处理方法 - 将数据按MPN_id分组并按日期组织
    processTableData(data) {
      const groupedData = {};
      const dateSet = new Set();

      // 第一遍遍历：收集所有日期和按MPN_id分组
      data.forEach(item => {
        if (!item.enter_data) return;


        if (this.showOnlyOverBenchmark) {
          if (Number(this.getAVGValue(item.test_valuess)) <= item.benchmark_value) return;
        }

        dateSet.add(item.enter_data);

        if (!groupedData[item.mpn_id]) {
          groupedData[item.mpn_id] = {
            mpn_id: item.mpn_id,
            mpn_name: item.mpn_name,
            internal_name: item.internal_name,
            process_name: item.process_name,
            benchmark_value: item.benchmark_value,
            line_name: item.line.line_name,
            max_avg: 0,
            dateData: {} // 按日期存储完整数据
          };
        }
        //确保benchmark_value是最新的并且为数字
        groupedData[item.mpn_id].benchmark_value = item.benchmark_value;
        groupedData[item.mpn_id].benchmark_value = Number(groupedData[item.mpn_id].benchmark_value);
        // 确保test_values是数组
        const testValues = Array.isArray(item.test_valuess) ?
          item.test_valuess :
          (typeof item.test_valuess === 'string' ? JSON.parse(item.test_valuess) : []);

        // 存储该日期的基准值
        groupedData[item.mpn_id].dateData[item.enter_data] = {
          ...item,
          test_valuess: testValues,
          benchmark_value: item.benchmark_value  // 确保存储基准值
        };
      });

      // 排序日期
      this.dateColumns = Array.from(dateSet).sort((a, b) => new Date(a) - new Date(b));

      // 确保每个MPN都有所有日期，缺失的日期填充空数据
      Object.values(groupedData).forEach(mpnData => {
        let maxAvg = 0;
        this.dateColumns.forEach(date => {
          if (!mpnData.dateData[date]) {
            mpnData.dateData[date] = {
              test_valuess: [], // 空数组表示没有数据
              enter_data: date,
              mpn_id: mpnData.mpn_id,
              mpn_name: mpnData.mpn_name,
              benchmark_value: mpnData.benchmark_value,  // 使用全局基准值填充
              ct_id: mpnData.ct_id
            };
          } else {
            const avg = this.getAVGValue(mpnData.dateData[date].test_valuess);
            if (avg !== '--' && Number(avg) > maxAvg) {
              maxAvg = Number(avg);
            }
          }
        });

        // 保存最大平均值
        mpnData.max_avg = maxAvg.toFixed(2);

        // 动态确定每个品目的最后有效日期
        let lastValidDate = null;
        for (let i = this.dateColumns.length - 1; i >= 0; i--) {
          const date = this.dateColumns[i];
          if (mpnData.dateData[date] && mpnData.dateData[date].test_valuess.length > 0) {
            lastValidDate = date;
            break;
          }
        }

        // 计算最后有效日期的平均值
        if (lastValidDate) {
          const lastAvg = this.getAVGValue(mpnData.dateData[lastValidDate].test_valuess);
          const exception_cause = mpnData.dateData[lastValidDate].exception_cause;
          const countermeasure = mpnData.dateData[lastValidDate].countermeasure;
          const acceptance = mpnData.dateData[lastValidDate].acceptance;
          const npi = mpnData.dateData[lastValidDate].npi;
          const ct_id = mpnData.dateData[lastValidDate].ct_id;
          mpnData.last_avg = lastAvg;
          mpnData.exception_cause = exception_cause;
          mpnData.countermeasure = countermeasure;
          mpnData.acceptance = acceptance;
          mpnData.npi = npi;
          mpnData.ct_id = ct_id;
          // 记录最后有效日期的基准值
          mpnData.current_benchmark_value = mpnData.dateData[lastValidDate].benchmark_value;
        } else {
          mpnData.last_avg = '--';
          mpnData.exception_cause = '--';
          mpnData.countermeasure = '--';
          mpnData.acceptance = '--';
          mpnData.npi = '--';
          mpnData.ct_id = '--';
          // 如果没有最后有效日期，使用全局基准值
          mpnData.current_benchmark_value = mpnData.benchmark_value;
        }
      });

      // 转换为数组并计算总数
      this.groupedTableData = Object.values(groupedData);
      this.total = this.groupedTableData.length;
    },


    // 重置
    resetButton() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        MPN_name: '',
        state: 2,
        query_time: [],
        line: []   // 确保初始化为数组
      };
      // 重置只显示未达标选项
      this.showOnlyOverBenchmark = false;
      // 重置只显示最后未达标选项
      this.showOnlyLastOverBenchmark = false;
      this.getCTList();
    }
  }
};
</script>

<style scoped>
/* 全局样式 */
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* 页面标题区域 */
.page-header {
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.page-header h1 {
  font-size: 24px;
  color: #303133;
  margin-bottom: 8px;
  font-weight: 600;
}

.page-header .subtitle {
  font-size: 14px;
  color: #909399;
  margin: 0;
}

/* 搜索卡片样式 */
.search-card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

/* 搜索行样式 */
.search-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
  align-items: center;
}

/* 表单组样式 */
.form-group {
  display: flex;
  align-items: center;
  margin-right: 25px;
  margin-bottom: 10px;
}

.form-label {
  min-width: 80px;
  color: #606266;
  font-size: 14px;
  margin-right: 10px;
  display: flex;
  align-items: center;
}

.form-label i {
  margin-right: 6px;
  font-size: 16px;
  color: #409EFF;
}

/* 筛选选项样式 */
.filter-options {
  margin-left: 10px;
}

.filter-label {
  font-size: 14px;
  margin-left: 5px;
}

/* 操作按钮区域 */
.action-buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  padding-top: 15px;
  border-top: 1px dashed #ebeef5;
}

.el-button {
  border-radius: 4px;
  padding: 9px 18px;
  margin-left: 12px;
}

/* 表格容器 */
.table-container {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  padding: 20px;
  overflow: hidden;
}

/* 颜色类 */
.normal-color {
  color: #67C23A;
}

.warning-color {
  color: #E6A23C;
}

.danger-color {
  color: #F56C6C;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .search-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .form-group {
    margin-bottom: 15px;
    margin-right: 0;
    width: 100%;
  }

  .el-select,
  .el-date-picker,
  .el-input {
    width: 100% !important;
  }

  .action-buttons {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .search-card {
    padding: 15px;
  }

  .form-label {
    min-width: 70px;
  }

  .el-button {
    margin-left: 8px;
    padding: 8px 15px;
    font-size: 13px;
  }
}
</style>